<template>
    <div class="goods-list">
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner" v-for="(item,i) in cars" :key="item.goodsId">
                    <mt-switch v-model="item.selected" @change="updateSelected(item.goodsId,item.selected)"></mt-switch>
                    <img :src="item.img" alt="">
                    <div class="info">
                        <h1>{{item.title}}</h1>
                        <div>
                            <span class="price">￥{{item.price}}  </span>
                            <div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
                                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                <input   :id="'test'+i" class="mui-input-numbox" type="number" :value="item.buynum" readonly @change="updateNum(item.goodsId,i)"/>
                                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				            </div>
                            <a @click.prevent="del(item.goodsId,i)">删除</a>
                        </div>
                    </div>
                </div>
            </div>
            </div>

            <div class="mui-card">
                    <div class="mui-card-content">
                        <div class="mui-card-content-inner jiesuan">
                            <div class="left">
                                <p>总价（不包含运费）:</p>
                                <p>已勾选商品 <span class="red">{{this.$store.getters.getNumPrice.num}}</span>   件，总价  ￥ <span class="red">{{this.$store.getters.getNumPrice.price}}</span></p>
                            </div>
                            <mt-button type="danger" @click="js()">去结算</mt-button>
                        </div>
                    </div>
            </div>
    </div>
</template>
<script>
import mui from "../lib/mui/js/mui.min.js"
export default {
    data(){
        return {
            cars:[]
        }
    },
    methods:{
        //删除商品，在本页面根据下标删除，但是还要保持vuex中的数据和本地仓库的数据一致
        del(id,i){
            //本页面的cars删除
            this.cars.splice(i,1);
            this.$store.commit("delItem",id);
            this.cars = JSON.parse(localStorage.getItem("cars"));

        },
        //修改选中和不选中
        updateSelected(id,val){
           
            //把修改的选中不选中修改到本地存储和state中的cars中
            this.$store.commit("updateSelected",{id,val});
            this.cars = JSON.parse(localStorage.getItem("cars"));

        },
        //修改购物的数量
        updateNum(id,i){
            console.log(id,"====>",document.getElementById("test"+i).value);
            //把修改的数据同时更改到state中的cars里面
            let val = document.getElementById("test"+i).value;
            this.$store.commit("updateNum",{id,val});
            this.cars = JSON.parse(localStorage.getItem("cars"));

        },
        //添加
        addGs(info){//注意info.selected  true或者false,你要修改成为1  0
            info.selected = info.selected?1:0;
            this.$ajax({
                url:"/addGwc",
                method:"post",
                data:info
            }).then(resp=>{
                if(resp.data.state == 1){
                        console.log("添加成功。。。。")
                }
               

            });

        },

        //删除
        delGs(id){
             this.$ajax({
                url:"/delgs/"+id,
                method:"delete"
            }).then(resp=>{
                if(resp.data.state == 1){
                        console.log("删除成功。。。。")
                }
               

            });
        },

        //修改
        upGs(info){
            info.selected = info.selected?1:0;
            this.$ajax({
                url:"/upgs",
                method:"put",
                data:info
            }).then(resp=>{
                if(resp.data.state == 1){
                        console.log("修改成功。。。。")
                }
               

            });
        },
        //点击结算按钮把购物车最新的额状态更新到数据库中
        js(){
            let ids = this.$store.state.ids;
            let bdids = []//保存的是购物车里最新的商品的id
            this.cars.forEach(item=>{
                bdids.push(item.goodsId);
            });
            ids.forEach(item=>{
                if(bdids.includes(item)){
                        //包含则需修改
                        //根据商品的id找到这个商品的对昂
                        this.cars.some(c=>{
                            if(c.goodsId === item){
                                this.upGs(c);//必须传入商品的对象
                                return true;
                            }
                        });
                        
                }else{
                    //不包含则删除
                    this.delGs(item);
                }
            });

            bdids.forEach(item=>{
                if(!ids.includes(item)){//不包含则添加
                    this.cars.some(c=>{
                            if(c.goodsId === item){
                                this.addGs(c);//添加
                                return true;
                            }
                        });
                }
            });

            alert("结算完毕");


        }
    },
    created(){
        console.log("1111",this.$store.state.cars);
        //this.cars = this.$store.state.cars;//从vuex中拿的
        this.cars = JSON.parse(localStorage.getItem("cars"));
    },
    mounted() {
		mui('.mui-numbox').numbox(); 
        
    },
}

</script>
<style scoped>
.mui-card-content-inner{
    display:flex;
    align-items: center;
}
img{
    width:60px;
    height: 60px;
}
h1{
    font-size:13px;

}
.price{
    color:red;
    font-weight: bold;
}
.jiesuan{
    display: flex;
    justify-content: space-around;
     
}
.red{
    color:red;
    font-weight: bold;
    font-size:20px;
}
</style>

